<template>
  <content-wrapper title="个人资料">
    <div class="box box-solid">
      <div class="box-body box-profile">
        <div class="row">
          <div class="col-sm-4">
            <router-link :to="{name:'ProfileAvatar'}">
              <bs-avatar :src="user.avatar" class="profile-user-img img-responsive img-circle"/>
            </router-link>
            <h3 class="profile-username text-center">{{user.userName}}</h3>
            <p class="text-muted text-center">{{roles}}</p>
          </div>
          <div class="col-sm-8">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-2 control-label">帐号</label>
                <div class="col-sm-10">
                  <div class="form-control">{{data.account}}</div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">电话</label>
                <div class="col-sm-10">
                  <input type="tel" class="form-control" placeholder="电话" v-model="data.tel">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" placeholder="姓名" v-model="data.userName">
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <bs-button icon="fa fa-save" type="primary" @click="onSave" :loading="loading">保存</bs-button>
                </div>
              </div>
            </form>
          </div>
        </div>

      </div>
    </div>
    <router-view/>
  </content-wrapper>
</template>

<script>
  import {mapState} from 'vuex';

  export default {
    name: 'Profile',
    data() {
      return {
        data: {},
        loading: false
      };
    },
    computed: {
      ...mapState({user: state => state.app.user}),
      roles() {
        const roles = [];
        if (this.user) {
          this.user.roles.forEach(val => {
            roles.push(val.roleName);
          });
        }
        return roles.join('/');
      }
    },
    mounted() {
      this.data = Object.assign({}, this.user);
    },
    methods: {
      onSave() {
        this.$api('common.profileSave').invoke(this.data).then(({data}) => {
          this.$store.commit('UPDATE_USER', data);
        });
      }
    }
  };
</script>

<style scoped>

</style>
